<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
          margin: 0;
          padding: 0;
        }
        ul {
          display: flex;
          border-bottom: 2px solid #e01222;
          padding: 0 10px;
        }
        li {
          width: 100px;
          height: 50px;
          line-height: 50px;
          list-style: none;
          text-align: center;
        }
        li a {
          display: block;
          text-decoration: none;
          font-weight: bold;
          color: #333333;
        }
        li a.active {
          background-color: #e01222;
          color: #fff;
        }
      
      </style>
</head>
<body>
    <div id="app">
        <ul>
          <li v-for="(ele,index) in list" key="ele.id">
            <a :class="{active:index==i}" @click="i=index" href="#">{{ele.name}}</a>
        </li>
          
        </ul>
      </div>
      <script src="./vue.js"></script>
      <script>
        const app = new Vue({
          el: '#app',
          data: {
            i:0,
            list: [
              { id: 1, name: '京东秒杀' },
              { id: 2, name: '每日特价' },
              { id: 3, name: '品类秒杀' }
            ]
          }
        })
      </script>
</body>
</html>